Day09--Sentry是如何獲取效能指標（下）---web vitals

16th鐵人賽

jamieleee

2024-09-23 10:38:48

185 瀏覽

分享至

前言

再上一篇我們了解到了Sentry是如何接入 React-Router、來在路由組件掛載的時候獲取url，那麼我們下一步就是在路由組件掛載的時候、檢測該url下的網頁性能。

Web Vitals指標

從Sentry的面板就可以看到，它也是透過 Web Vitals 指標來檢測網頁的效能。

Web Vitals 是一組由Google在2020年提出的性能指標，旨在提供一組易於理解且具有普遍適用性的標準，讓開發者和網站所有者更清晰地知道應該優化哪些方面，以衡量網頁的用戶體驗。

而在Sentry的主面板中，我們可以看到它主要紀錄了Web Vitals 中的特定指標：

LCP (Largest Contentful Paint)
- 測量網頁上最大內容元素的呈現時間，反映了主要內容載入的速度。這個指標可以看作「最大元素」加載完成的時間，通常是網頁的圖片、影片或大型文字區塊。
FCP (First Contentful Paint)
- 首次內容繪製，測量從頁面開始載入到瀏覽器呈現出第一個內容元素（如文字、圖片等）的時間。這標誌著用戶開始看到內容的時刻。
INP (Interaction to Next Paint)
- 測量用戶與頁面進行互動（如點擊按鈕）到頁面響應這個互動的時間。它反映了頁面在與用戶交互時的響應速度，能幫助開發者評估頁面的互動性能。
CLS (Cumulative Layout Shift)
- 測量頁面的視覺穩定性，計算頁面載入期間出現的所有意外佈局偏移。它用於評估網頁元素在載入過程中是否出現移動，避免用戶錯點按鈕或連結，提升視覺體驗。
TTFB (Time to First Byte)
- 首字節時間，測量瀏覽器發出網頁請求到接收到第一個字節的時間。TTFB 主要用來評估server side響應速度以及client side網絡狀況。

Self sdk接入web vitals

雖然Google Chrome團隊有開源Web Vitals的npm，但在Sentry官方的sdk中，可以在packages/browser-utils/src/metrics看到Sentry是自己實現了對web-vitals指標的獲取（不過應該是把官方的npm直接複製下來做二次開發，以保證版本穩定）。

不過今天的Demo還是用Google Chrome官方的npm套件來處理，使用onLCP 和onFCP 來獲取LCP和FCP這兩個指標。

根據之前接入React Router的SDK，可以藉由監聽location參數在路由切換、新路由組件掛載的時候觸發邏輯，所以我們可以在這時執行onLCP 和onFCP ：

    reactRouterMetric(RoutesComponent) {
        return ({ children }) => {
            const location = useLocation();
            useEffect(() => {
                onLCP((metric) => this._reportWebVitals('LCP', metric));
                onFCP((metric) => this._reportWebVitals('FCP', metric));
            }, [location]);

            return <RoutesComponent>{children}</RoutesComponent>;
        };
    }

    _reportWebVitals(type, metric) {
        const metricInfo = {
            type: type,
            value: metric.value,
            delta: metric.delta,
            id: metric.id,
        };
        console.log('metricInfo:', metricInfo);
        // TODO: send to monitor server
    }

可以看到，我們在路由切換的時候，console有顯示該頁面的LCP和FCP這兩個指標。